<template>
	<view style="height: 100%;">
		<view class="u-flex u-padding-20 bgfff">
			<view class="u-flex u-flex-1">
				<el-button type="primary" size="small" @click="addData()" icon="el-icon-plus">添加分类</el-button>
			</view>

			<!-- <view class="u-flex u-flex-1 u-row-right">
				<el-input placeholder="请输入分类名字" v-model="params.searchText" size="small" style="width: 40%;" clearable>
					<el-button slot="append" icon="el-icon-search" size="small" @click="getDataList()" />
				</el-input>
			</view> -->
		</view>

		<view class="u-padding-20" style="height: calc(100% - 110rpx);width: 100%;">
			<el-table :data="dataList" style="width: 100%" border stripe size="small" height="100%">
				<el-table-column align="center" type="index" width="55" label="序号">
				</el-table-column>
				<el-table-column align="center" label="操作" width="200">
					<template slot-scope="scope">
						<el-button size="mini" @click="editThis(scope.row)" type="text">编辑</el-button>
						<el-button size="mini" @click="deleteThis(scope.row)" type="text">删除</el-button>
						<el-button v-if="scope.$index != 0" size="mini"
							@click="changeClass(scope.$index,scope.$index-1)" type="text">
							上移
						</el-button>
						<el-button v-if="scope.$index != dataList.length-1" size="mini"
							@click="changeClass(scope.$index,scope.$index+1)" type="text">
							下移
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="分类" width="180">
				</el-table-column>
				<el-table-column prop="beizhu" label="备注">
				</el-table-column>
				<el-table-column prop="isSee" label="是否可见">
					<template slot-scope="scope">
						<view v-if="scope.row.isSee == false">不可见</view>
						<view v-else>可见</view>
					</template>
				</el-table-column>
				<el-table-column prop="createdAt" label="创建日期">
				</el-table-column>
			</el-table>
		</view>

		<el-dialog title="分类" :visible.sync="show1" width="30%">
			<el-form label-width="80px" :rules="rules" :model="params" ref="thisForm" size="small">
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="params.name" placeholder="请填写分类名称"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="beizhu">
					<el-input v-model="params.beizhu" placeholder="请填写备注"></el-input>
				</el-form-item>
				<el-form-item label="是否可见" prop="beizhu">
					<el-switch v-model="params.isSee"></el-switch>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="show1=false" size="small">取 消</el-button>
				<el-button type="primary" @click="confirmAddData" size="small">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				show1: false,
				dataList: [],
				params: {
					name: '',
					beizhu: '',
					orderNum: 0,
					objectId: '',
					isSee: true,
				},
				rules: {
					name: [{
						required: true,
						message: '请填写分类名称',
						trigger: 'blur'
					}],
				}
			}
		},

		onLoad() {
			that = this
			that.getDataList()
		},

		methods: {
			changeClass(index1, index2) {
				console.log(index1, index2)

				that.common.rightApi("admin/artClass/changeOrder", {
					objectId1: that.dataList[index1].objectId,
					objectId2: that.dataList[index2].objectId,
				}).then(res => {
					that.getDataList()
				})
			},

			deleteThis(item) {
				uni.showModal({
					content: "是否删除此分类",
					success(res) {
						if (res.confirm) {
							that.common.rightApi("admin/artClass/remove", {
								objectId: item.objectId,
							}).then(res => {
								that.common.showToast("删除成功")
								that.getDataList()
							})
						}
					}
				})
			},

			editThis(item) {
				that.params.name = item.name
				that.params.beizhu = item.beizhu
				that.params.objectId = item.objectId
				that.params.isSee = item.isSee
				that.show1 = true
			},

			addData() {
				that.params.name = ""
				that.params.beizhu = ""
				that.params.objectId = ""
				that.params.isSee = true
				that.show1 = true
			},

			confirmAddData() {
				that.$refs["thisForm"].validate((valid) => {
					if (valid) {
						that.common.rightApi("admin/artClass/save", that.params).then(res => {
							that.params.name = ""
							that.show1 = false
							that.common.showToast("保存成功")
							that.getDataList()
						})
					} else {
						return false;
					}
				});
			},

			getDataList() {
				that.common.rightApi("admin/artClass/list", that.params).then(res => {
					that.dataList = res.data
				})
			}
		},

	}
</script>

<style>

</style>
